---
import { getCollection } from "astro:content"
import Layout from "./layout.astro"
import MainNavigation from "./main-navigation.astro"

const guides = await getCollection("guides")
---

<Layout>
	<div class="isolate">
		<header
			class="sticky top-0 z-10 flex bg-slate-700/30 shadow backdrop-blur-sm transition"
		>
			<div class="container">
				<MainNavigation />
			</div>
		</header>
		<main class="container mt-8 flex items-start gap-4">
			<nav class="sticky top-24 hidden w-48 md:block">
				<h2 class="text-2xl">Guides</h2>
				<ul class="mt-3 flex flex-col items-start gap-2">
					{
						guides.map((guide) => (
							<li>
								<a class="link" href={`/guides/${guide.slug}`}>
									{guide.data.title}
								</a>
							</li>
						))
					}
				</ul>
			</nav>
			<section class="prose prose-invert min-w-0 flex-1 pb-8">
				<slot />
			</section>
		</main>
	</div>
</Layout>
